<template>
  <div id="password_free">
    <div class="top">
      <van-icon @click="toPurseHome()" name="arrow-left"/>
      <div class="title">免密支付</div>
    </div>
    <div class="middle">
      <van-cell v-for="(item,index) in PurseList" :key="index">
        <div class="img"><img :src="item.bankIcon" alt="" width="50px" height="50px"></div>
        <div class="name">{{ item.bankName }}</div>
        <div class="pf" @click="toOpened(item)">
          {{ item.passwordFreeStatus === 1 ? "已开通" : "去开通" }}
          {{ item.precedenceStatus === 1 ? "优先支付" : "" }}
          <van-icon name="arrow"/>
        </div>
        <div>
          <van-action-sheet
              v-model="show"
              :actions="actions"
              cancel-text="取消"
              close-on-click-action
              @select="handleSelect"
              :overlay="true"
          />
        </div>
      </van-cell>
    </div>
  </div>
</template>

<script>
import {getPurse, updatePP, updatePS} from "@/api/purse/purse_home";
import {Dialog} from "vant";

export default {
  data() {
    return {
      item1: this.$route.query.item,
      pp: {},
      PurseList: [],
      show: false,
      actions: [
        {id: 1, name: '设置为优先免密支付方式'},
        {id: 2, name: '关闭免密支付'},
      ],
    };
  },
  methods: {
    toPurseHome() {
      this.$router.push("/purse_home");
    },

    async handleSelect(action) {
      let id;
      if (this.item1 === undefined) {
        id = this.pp.id;
      } else {
        id = this.item1.id;
      }
      if (action.id === 1) {
        updatePS(id).then(async (res) => {
          if (res.data.code === 1) {
            this.$toast.success("设置成功");
            this.item1 = undefined;
            try {
              await this.getPurse();
            } catch (error) {
              console.error('获取钱包信息失败：', error);
            }
            this.show = false;
          } else {
            this.$toast.fail("设置失败");
            this.show = false;
          }
        }).catch((error) => {
          console.error('更新失败：', error);
          this.$toast.fail('更新失败');
          this.show = false;
        });
      } else {
        try {
          await this.getCancel(id);
        } catch (error) {
          console.error('关闭操作失败：', error);
        }
      }
    },

    toOpened(item) {
      this.pp = item;
      if (item.passwordFreeStatus === 1) {
        this.show = true;
      } else {
        this.$router.push({
          path: '/opened_password_free',
          query: {item: item}
        });
      }
    },

    async getCancel(id) {
      const beforeClose = async (action, done) => {
        if (action === 'confirm') {
          try {
            const res = await updatePP(id);
            if (res.data.code === 1) {
              this.$toast.success("关闭成功");
              this.item1 = undefined;
              await this.getPurse();
            } else {
              this.$toast.fail("关闭失败");
            }
          } catch (error) {
            console.error('更新失败：', error);
            this.$toast.fail('更新失败');
          }
          setTimeout(done, 1);
        } else {
          done();
        }
      };
      try {
        await Dialog.confirm({
          title: '确认关闭' + this.pp.bankName + '免密支付',
          message: '关闭后下次乘车将无法享受便捷支付体验',
          beforeClose,
        });
      } catch (error) {
        console.error('对话框确认失败：', error);
      }
    },

    getPurse() {
      const userId = localStorage.getItem("userId");
      getPurse(userId).then((res) => {
        this.PurseList = res.data.data;
        if (this.item1 === undefined) {
          this.show = false;
        } else {
          if (this.item1.passwordFreeStatus === 1) {
            this.show = true;
          }
        }
      });
    },
  },

  created() {
    this.getPurse();
  }
};
</script>

<style>
body {
  background-color: #F3FCFF;

  #password_free {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      width: 100%;
      height: 66px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;

      .van-icon {
        font-size: 26px;
        position: absolute;
        left: 20px;
      }

      .title {
        font-size: 20px;
      }
    }

    .middle {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 66px;

      .van-button {
        width: 66px;
        height: 100%;
        font-size: 16px;
        font-weight: bold;
        border: none;
      }

      .van-cell {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F3FCFF;
        border-bottom: 1px solid #DADEE0;

        .pf {
          float: right;
          font-size: 16px;
          font-weight: bold;
          margin-top: 16px;
          color: #4B9EFF;
        }

        .img {
          float: left;
          margin-right: 10px;
        }

        .name {
          float: left;
          font-size: 18px;
          margin: 16px 0 0 10px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>